<template>
  <div class='q-pa-md' style='max-width: 500px'>
    <q-form
      class='q-gutter-md'
    >
      <div class='row row-space' v-for='item in carDetailArr'>
        <div class='col-2 input-label'>
          {{ item.label }}
        </div>
        <div v-if='entityCode=="702"' class='col-8'>
          <a :href='item.value' target="_blank">{{item.value}}</a>
        </div>
        <div v-else-if='item.propertyCode == "systemCode"'>
          <q-btn label="查看服务系统代码" color="secondary" @click="alert = true" />
          <q-dialog
            v-model="alert"
            full-width
          >
            <q-card style='height: 500px'>
              <q-card-section>
                <TreeEntity
                  :reqData='reqData'
                  :tickType='mode'
                  v-model:tickObj='ticked'
                  @update:ticked='tickedFn'
                  :tickeds = 'tickedId'
                  :disable = 'isdisable'
                />
              </q-card-section>

              <q-card-actions align="right" class="bg-white text-teal">
                <q-btn flat label="OK" v-close-popup />
              </q-card-actions>

            </q-card>
          </q-dialog>
        </div>
        <div v-else-if='item.type == "image"'>
          <img width='300' v-for='(inItem,index) in tranceferm(item.value)' :key='index' :src='getImageURL1(inItem)'>
        </div>
        <div class='col-8' v-else>
          <q-input outlined v-model='item.value' ref='staffRef' readonly />
        </div>
      </div>
      <div v-if='entityCode == "701" || entityCode == "303"'>
        <div class='col-2 input-label'>
          图片
        </div>
        <div class='col-8' v-for='item in serveIdArr'>
          <img :src='getImageURL1(item)' alt='车'>
        </div>
      </div>
      <div v-if='entityCode == "301" && childCode == "01" || entityCode == "201" && childCode == "02"' >
        <q-btn label="展示树型数据结构" color="secondary" @click="alert = true" />
        <q-dialog
          v-model="alert"
          full-width
        >
          <q-card style='height: 500px'>
            <q-card-section>
              <TreeEntity
                :reqData='reqData'
                :tickType='mode'
                v-model:tickObj='ticked'
                @update:ticked='tickedFn'
              />
            </q-card-section>

            <q-card-actions align="right" class="bg-white text-teal">
              <q-btn flat label="OK" v-close-popup />
            </q-card-actions>

          </q-card>
        </q-dialog>
      </div>
    </q-form>
  </div>
</template>

<script lang='ts'>
import { onMounted, onBeforeMount, ref, reactive, computed } from 'vue';
import { getRequest, postRequest } from 'src/components/functions';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'src/store';
import { laEggSolid } from '@quasar/extras/line-awesome';
import { api } from 'boot/axios';
import TreeEntity from '../tree/TreeEntity.vue';
import { ChanReqData } from 'pages/tree/model/Interfaces';
import { SystemInfo } from 'src/store/sphinx/state';
import { log } from 'console';

export default {
  name: 'Detail',
  components:{ TreeEntity },
  setup() {
    let isdisable = ref(false)
    let alert = ref(false)
    let mode = ref('leaf')
    let reqData = ref<ChanReqData>()
    let ticked = ref([])
    const rote = useRoute();
    let detailMsg = ref<{ property_name: string }>();
    let carDetailArr = ref([]);
    let usestoreData = useStore();
    const userData = usestoreData.state.sphinx.userData
    let carDetailData = usestoreData.state.sphinx.CarMessage
    let SystemInfo = usestoreData.state.sphinx.SystemInfo
    let orderInfo = usestoreData.state.sphinx.OrderInfo
    let entityCode = ref(rote.query.entityCode);
    // let entityNo = ref(rote.query.entityNo)
    let childCode = ref(rote.query.childCode);
    let tickedId = ref([])
    let imageSwap = ''

    function alalyzePerson (x) {
      const value = ['education','pictureUrl','cardNo','shebao']

      if (value.indexOf(x) !== -1) {
        imageSwap = 'image'
      } else {
        imageSwap = ''
      }
    }

    async function getDetailMessage() {
      let requestSceneBody = [
        {
          "entityCode":'101',
          "codeName":'',
          "entityType":'01',
          "typeName":'',
          "eventCode":null,
          "eventName":null,
          "propertyEnglish":null,
          "propertyChinese":null,
          "propertyValue":null,
          "propertyCondition":null,
          "companyId":userData.companyId
        },
        {
          "entityCode":'102',
          "codeName":'',
          "entityType":'02',
          "typeName":'',
          "eventCode":null,
          "eventName":null,
          "propertyEnglish":'roleType',
          "propertyChinese":null,
          "propertyValue":userData.roleType,
          "propertyCondition":null,
          "companyId":userData.companyId
        }];
      let {data} = await api.post('/channel/channel/getSceneCode',requestSceneBody)
      let postData = {
        companyId:userData.companyId,
        entityCode: entityCode.value,
        entityType: childCode.value,
        sceneCode: data.data,
        objectCodeType: '103'
      };
      let cararr = reactive([]);
      let callback = function(data: { property_name: any; }[]) {
        data.forEach((item:any) => {
          cararr.push({ label: item.property_name, code: item.property_code });
        });
        if(entityCode.value == "303" && childCode.value == "01"){
          cararr.forEach(x => {
            for (let y in orderInfo) {
              if (x.code == y) {
                alalyzePerson(x.code)
                carDetailArr.value.push({ label: x.label,propertyCode:x.code, value: orderInfo[y],type: imageSwap });
              }
            }
          })
        }
        else if(entityCode.value == "201" && childCode.value == "02"){
          cararr.forEach(x => {
            for (let y in SystemInfo) {
              if (x.code == y) {
                alalyzePerson(x.code)
                carDetailArr.value.push({ label: x.label,propertyCode:x.code, value: SystemInfo[y],type: imageSwap });
              }
            }
          })
        } else{
          cararr.forEach(x => {
            for (let y in carDetailData) {
              if (x.code == y) {
                alalyzePerson(x.code)
                carDetailArr.value.push({ label: x.label,propertyCode:x.code, value: carDetailData[y],type: imageSwap });
              }
            }
          })
        }
        if(entityCode.value == "201" && childCode.value == "02"){
          getSelectTree()
        }

      };
      postRequest('channel/channel/queryMenu', postData, callback);
    }

    function getImageURL1(item) {
      return `${process.env.api}file/file/downloadByEntity?fileEntityId=${item}`;
    }



    let initArr = []
    let serveIdArr = ref([]);
    function getImageId() {
      const reqParams = {}
      let url = ''

      if(entityCode.value == "303"){
        // reqParams["orderNo"] = orderInfo.orderNo
        // url = 'transaction/order/findAccNo'
        reqParams["serveNo"] = carDetailData.orderNo
        url = 'file/file/downloadByEntityId'
      }else {
        console.log(carDetailData)
        reqParams["serveNo"] = carDetailData.serveNo
        url = 'file/file/downloadByEntityId'
      }
      getRequest(url,(res)=>{
        serveIdArr.value = res;
      },reqParams)
    }
    function tickedFn() {
      tickedId.value = initArr;
      console.log(initArr);
    }
    function getSelectTree() {
      let treeCode

      carDetailArr.value.forEach((item,index,array)=>{
        // console.log("treeCode",item);
        if(item.propertyCode == "systemCode"){
          treeCode = item.value;

        }
      })
      getRequest('/route/route/getNoTree',res =>{
        let n = []
        res.forEach((item,index,array)=>{
          if(item.id !== null){
            n.push(item.id)
          }
        })
        tickedId.value = n;
        initArr = n;
        console.log(tickedId.value);
      },{treeCode})
    }

    onMounted(() => {

      console.log("carDetailData=",carDetailData);

      let entityNo = ''
      if(entityCode.value === "201" && childCode.value === "02"){
        entityNo = SystemInfo.unitNo
      }
      console.log(1)
      if(entityCode.value === "301" && childCode.value ==="02"){
        entityNo = carDetailData.seriesNo
      }
      console.log(2)
      if(entityCode.value === "301" && childCode.value ==="01"){
        entityNo = carDetailData.seriesNo
        // console.log("entityNo111=",entityNo);
      }
      console.log(3)
      /************************************************************/
      if(entityCode.value === "301" && childCode.value ==="01120"){

        entityNo = carDetailData.systemCode;
        console.log("entityNo01120=",entityNo);
      }
      console.log(4)
      console.log("entityNo=",entityNo);
      /************************************************************/

      reqData.value = {
        "entityCode":entityCode.value + '',
        "entityType":childCode.value + '',
        "length": "999",
        "isRoot":"0",
        "chainHead":"0",
        "entityNo": entityNo
      }

      getImageId();
      getDetailMessage();
    });
    function tranceferm (ids: string): string[] {
      console.log(ids)
      let swap
      if (ids.indexOf(',')=== -1) {
        swap = [ids]
      } else {
        swap = ids.split(",");
      }
      console.log(swap)
      return  swap
    }

    return {
      alert,
      mode,
      reqData,
      ticked,
      usestoreData,
      detailMsg,
      carDetailArr,
      userData,
      carDetailData,
      entityCode,
      serveIdArr,
      getImageURL1,
      tickedFn,
      tickedId,
      isdisable,
      childCode,
      tranceferm
    };
  }
};
</script>

<style scoped>
</style>
